<template>
	<view class="collect">
		<view class="status_bar">
			
		</view>
		<view class="top headline">
			<i class="uni-btn-icon left" @click="commonality.back()"></i>
			我的收藏
			<text @click="compile = true" v-show="shop_list.length>0&&!compile">编辑</text>
			<text @click="compile = false" v-show="shop_list.length>0&&compile">完成</text>
		</view>
		<view class="main">
			<checkbox-group @change="checkboxChange">
				<view class="ul" :class="{ compile: compile }">
					<view class="list" v-for="(item, index) in shop_list" :key="index">
						<view class="checked">
							<checkbox :value="index + ''" :checked="item.checked" class="checked-box" color="#bd3c8c" :id="'label' + index" />
							<label class="label-2" :for="'label' + index" :class="{ active: item.checked }"><image src="/static/img/checked_box.png" /></label>
						</view>
						<view class="shop" @click="go_good(item.goodsId)">
							<view class="img">	<image :src="item.image"  mode="widthFix" /></view>
							<view class="msg">
								<view class="name">{{item.productName}}</view>
								<!-- <view class="price">
									<text>￥</text>
									{{item.price}}
									<image src="/static/img/car_1.png" class="right" />
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			<view class="pagination" v-if="shop_list.length!=0">
				<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
					<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
					上一页
				</view>
				<view class="center">{{ paging.page }}/{{ paging.total }}</view>
				<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
					下一页
					<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
				</view>
			</view>
			<view v-if="shop_list.length==0" class="notavailable">
				<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
				<view class="nottext">暂时没有数据</view>
			</view>
		</view>
		
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
		<view class="control" v-show="shop_list.length>0&&compile">
			<checkbox-group @change="all">
				<view class="checked" style="width: 65px;">
					<checkbox value="1" class="checked-box" id="remall" />
					<label class="label-2" for="remall" :class="{ active: is_all }"><image src="/static/img/checked_box.png" /></label>
					<text style="margin-left: 10px;">全选</text>
				</view>
			</checkbox-group>
			<view class="remove" @click="del()">删 除</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import collect from '../../../servers/my/collect.js';	
export default {
	components: { uniIcons },
	data() {
		return {
			shop_list: [],
			compile: false,
			is_go_top: false,
			delArray:[],
			is_all: false,
			paging: {
				page: 1,
				total: 100
			}
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	mounted() {
		this.getDate();
	},
	methods: {
		go_good(e) {
		    this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId', e);
		   },
		getDate() {
			var obj={currentPage:this.paging.page, pageSize: 10}
			collect.initData(obj)
				.then(res => {
					this.paging.total = Math.ceil(res.data.total / res.data.size);
					this.shop_list = res.data.records.map(v => {
						v.image = this.imgCDNUrl + v.productImg;
						return v;
					});;
					
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
				console.log(12321321312321);
		},
		all(e) {
			if (this.is_all) {
				this.is_all = false;
				for (var i = 0; i < this.shop_list.length; ++i) {
					const item = this.shop_list[i];
					this.$set(item, 'checked', false);
				}
			} else {
				this.is_all = true;
				for (var i = 0; i < this.shop_list.length; ++i) {
					const item = this.shop_list[i];
					this.$set(item, 'checked', true);
				}
			}
		},
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		},
		checkboxChange(e) {
			var items = this.shop_list,
				values = e.detail.value;
				
			for (var i = 0; i < items.length; ++i) {
				const item = items[i];
				if (values.includes(String(i))) {
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}
			if (items.length == values.length) {
				this.is_all = true;
			} else {
				this.is_all = false;
			}
			console.log(this.shop_list);
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getDate();
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getDate();
			}
		},
		del(){
			/* 数据整合 */
			var _this=this;
			var delArray = new Array()
			 for (var i = 0; i < this.shop_list.length; ++i) {
				const item = this.shop_list[i];
			 	if(item.checked){
			 		delArray.push(item.id);
			 	}				
			 }
			console.log(delArray.join(','));
			collect.del(delArray.join(','))
				.then(res => {
					console.log("数据重新加载");
					_this.paging.page == 1;
					_this.getDate();
					
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		}
	}
};
</script>
<style lang="less" scoped>
	.status_bar{
		 height: var(--status-bar-height);
		 width: 100%;
	}
.collect {
	height: 100%;
	.top {
		text {
			position: absolute;
			font-size: 30rpx;
			right: 20rpx;
			top: 0;
		}
	}
	.main {
		position: absolute;
		top: calc(var(--status-bar-height) + 44px);
		bottom: 0;
		width: 100%;
		overflow-x: auto;
		.ul {
			background: #fff;
			.list {
				.checked {
					display: none;
					.checked-box {
						display: none;
					}
					.label-2 {
						display: inline-block;
						width: 44rpx;
						height: 44rpx;						
						vertical-align: bottom;
						margin-right: 5px;
						margin: 110rpx 10rpx;
						border: 1px solid #bd3c8c;
						box-sizing: border-box;
						border-radius: 50%;
						image {
							width: 44rpx;
							height: 44rpx;
							display: none;
							margin: -1px;
						}
					}
					.label-2.active {
						background: #fff;
						image {
							display: block;
						}
					}
				}
				padding: 0 20rpx;
				position: relative;
				.shop {
					width: 100%;
					display: flex;
					border-bottom: 1rpx solid #e1e1e1; /*no*/
					padding: 39rpx 0 33rpx;
					.img {
						// height: 218rpx;
						image {
							width: 218rpx;
							height: 218rpx;
							border-radius: 20rpx;
						}
					}
					.msg {
						position: relative;
						padding-left: 29rpx;
						width: 100%;
						.name {
							font-size: 28rpx;
							line-height: 50rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.price {
							position: absolute;
							width: 100%;
							right: 0;
							bottom: 0;
							padding-left: 29rpx;
							color: #bd3c8c;
							font-size: 36rpx;
							box-sizing: border-box;
							text {
								font-size: 30rpx;
							}
							.right {
								width: 44rpx;
								height: 44rpx;
								position: relative;
								right: 20rpx;
								top: -5rpx;
							}
						}
					}
				}
			}
			li:nth-last-child(1) {
				.shop {
					border-bottom: none;
				}
			}
		}
		.compile {
			.list {
				display: flex;
				.checked {
					display: block;
					.checked-box {
						display: none;
					}
				}
				.shop {
					padding-left: 10rpx;
				}
			}
		}
	}
	.control {
		position: absolute;
		bottom: 0;
		line-height: 132rpx;
		height: 132rpx;
		width: 100%;
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-top: 1rpx solid #efefef; /*no*/
		background: #fff;
		.cube-checkbox {
			flex: 1;
		}
		.remove {
			position: relative;
			width: 195rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 40rpx;
			text-align: center;
			font-size: 30rpx;
			color: #666666;
			border: 1px solid #666666; /*no*/
			top: 30rpx;
			margin-left: 35rpx;
		}
		.checked {
			width: 60rpx;
			.checked-box {
				display: none;
			}
			.label-2 {
				display: inline-block;
				vertical-align: bottom;
				margin-right: 5px;
				width: 44rpx;
				height: 44rpx;
				margin: 45rpx 1rpx;
				border: 1px solid #bd3c8c;
				box-sizing: border-box;
				border-radius: 50%;
				image {
					width: 44rpx;
					height: 44rpx;
					display: none;
					margin: -1px;
				}
			}
			.label-2.active {
				background: #fff;
				image {
					display: block;
				}
			}
		}
	}
}

</style>
